<!--新增用户-->
<template>
  <el-dialog
    class="base-dialog version-dialog"
    :class="{ readonly: readonly }"
    :custom-class="'panna-dialog_medium'"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
    @closed="closedDialog"
  >
    <el-form
      ref="formData"
      v-loading="formLoading"
      :rules="formRules"
      :model="formData"
      label-width="100px"
    >
      <el-form-item label="名称" prop="appName">
        <el-input
          v-model="formData.appName"
          :disabled="readonly"
          placeholder="请输入名称"
        />
      </el-form-item>
      <el-form-item label="版本号" prop="versionCode">
        <el-input
          v-model="formData.versionCode"
          :disabled="readonly"
          placeholder="请输入版本号"
        />
      </el-form-item>
      <el-form-item label="状态" :disabled="readonly" prop="status">
        <el-switch
          v-model="formData.status"
          :disabled="readonly"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
      <el-form-item label="强制状态" :disabled="readonly" prop="forceStatus">
        <el-switch
          v-model="formData.forceStatus"
          :disabled="readonly"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
      <el-form-item label="更新内容" prop="updateMessage">
        <el-input
          v-model="formData.updateMessage"
          type="textarea"
          :disabled="readonly"
          placeholder="请输入更新内容"
          :autosize="{ minRows: 2 }"
        />
      </el-form-item>
      <el-form-item class="upload" label="安装包" prop="url">
        <BaseUploadFile
          v-model="formData.url"
          :disabled="readonly"
          business-type="70"
          :multiple="false"
          :limit="1"
        />
      </el-form-item>
    </el-form>
    <span v-if="!readonly" slot="footer" class="base-dialog-footer">
      <el-button v-loading="submitLoad" type="primary" @click="submitForm"
        >保 存</el-button
      >
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { update, create, get } from "../../../api/Eln/ElnAppVersion.js";
export default {
  name: "ElnAppVersionEdit",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      title: "",
      dialogVisible: true,
      submitLoad: false,
      formData: {
        appName: "",
        packageName: "",
        versionCode: undefined,
        updateMessage: "",
        size: 0,
        url: [],
        status: 1,
        forceStatus: 1,
        platForm: "",
      },
      formRules: {
        // appName: [{ required: true, message: '请输入名称', trigger: "blur" }],
        url: [{ required: true, message: "请上传安装包" }],
      },
      searchUserLoading: false,
      formLoading: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化
    async init() {
      this.formLoading = true;
      // editId 存在表示编辑 不存在表示新增
      this.title = !this.editId ? "新增" : this.readonly ? "查看" : "编辑";
      // 编辑
      if (this.editId) {
        // 获取用户信息
        get({ id: this.editId })
          .then((res) => {
            this.formLoading = false;
            const data = res.data;
            data.url = data.url = [
              {
                name: data.appName || "",
                url:
                  data.url,
                url2: data.url,
              },
            ];
            this.formData = data;
          })
          .catch(() => {
            this.formLoading = false;
          });
      } else {
        this.formLoading = false;
      }
    },
    // 提交表单
    submitForm() {
      // return;
      // 校验表单必填项
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 当前编辑ID是否存在 存在则去更新用户信息
          const requestData = JSON.parse(JSON.stringify(this.formData));
          requestData.url = this.formData.url[0].url2;
          requestData.appName = this.formData.url[0].name;
          if (!requestData.versionCode) {
            try {
              // 处理app的版本号,如果版本号不符合规定,则不赋值
              var verArr = this.formData.url[0].name.match(/[0-9]+/g);
              requestData.versionCode = parseInt(
                verArr.join("").replace(/,/g, "")
              );
            } catch {
              requestData.versionCode = 0;
            }
          }

          if (this.formData.url[0]?.fileSize !== undefined) {
            requestData.size = this.formData.url[0].fileSize;
          }

          if (this.editId) {
            this.editAPI(requestData);
          } else {
            // 新增
            this.addAPI(requestData);
          }
        } else {
          this.$message.error("请完善信息！");
        }
      });
    },
    // 新增接口
    addAPI(data) {
      create(data)
        .then((res) => {
          this.SuccessfulOperation();
        })
        .catch(() => {
          this.submitLoad = false;
        });
    },
    // 编辑接口
    editAPI(data) {
      update({
        ...data,
        id: this.editId,
      })
        .then((res) => {
          this.SuccessfulOperation();
        })
        .catch(() => {
          this.submitLoad = false;
        });
    },
    // 操作成功回调用
    SuccessfulOperation() {
      this.submitLoad = false;
      this.$message.success("操作成功");
      this.$emit("success");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      this.$emit("input", false);
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$refs.formData.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.version-dialog {
  ::v-deep .el-dialog__body {
    .el-form-item.upload {
      margin-bottom: 0 !important;

      .el-form-item__content {
        .base-upload {
          height: unset;
        }
      }
    }
  }

  &.readonly {
    ::v-deep .el-dialog__body {
      height: calc(100% - 72px) !important;
    }
  }
}
</style>
